<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/aui.css" />
      <style>
          html,body{
              height:100%;
              /*background-image: url(../image/background.jpg);
              background-size: cover;*/
          }
      </style>
  </head>
  <body>
    <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
      <div class="aui-info-item">
          <img src="../image/demo2.png" style="width:1.5rem" class="aui-img-round" /><span class="aui-margin-l-5">设备名：</span>
          </div>
      <div class="aui-info-item">NULL</div>
  </div>
  <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
    <div class="aui-info-item">
        <span class="aui-margin-l-5">当前模式：</span>
        </div>
    <div class="aui-info-item" id="connect">未知</div>
  </div>
  <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
    <div class="aui-info-item">
        <span class="aui-margin-l-5">状态：</span>
        </div>
    <div class="aui-info-item" id="connect">未连接</div>
  </div>
  <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
    <div class="aui-info-item">
        <span class="aui-margin-l-5">风扇转速：</span>
        </div>
    <div class="aui-info-item">NULL</div>
  </div>
  <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
    <div class="aui-info-item">
        <span class="aui-margin-l-5">设备温度：</span>
        </div>
    <div class="aui-info-item" id="connect">NULL</div>
  </div>
  <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
    <div class="aui-info-item">
        <span class="aui-margin-l-5">系统时间：</span>
        </div>
    <div class="aui-info-item" id="connect">NULL</div>
  </div>
  <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
    <div class="aui-info-item">
        <span class="aui-margin-l-5">灯组数目：</span>
        </div>
    <div class="aui-info-item" id="connect">NULL</div>
  </div>
  <ul class="aui-list aui-form-list">
            <li class="aui-list-header">设备选项</li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-home"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="设备地址" id="userip">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="设备端口" id="userport">
                    </div>
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-display"></i>
                    </div>
                </div>
            </li>
        </ul>

  <div class="aui-col-xs-6" style="padding-right: 30px;padding-left: 30px;padding-top: 5px;">
      <div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="openDialog('connect')">连接</div>
  </div>
  <div class="aui-col-xs-6" style="padding-right: 30px;padding-left: 30px;padding-top: 5px;">
      <div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="openDialog('disconnect')">断开</div>
</div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/aui-dialog.js" ></script>
  <script type="text/javascript">
      apiready = function(){

      };
      var dialog = new auiDialog();
      function openDialog(e){
        if(e=="connect"){
                  var ip = document.getElementById("userip");
                  var port = document.getElementById("userport");
                  console.log(ip.value);
                  console.log(port.value);
                  if(ip.value==""||port.value==""){
                    dialog.alert({
                    title:"警告",
                    msg:'地址或端口为空',
                    buttons:['确定']},function(ret) {
                      console.log(ret);
                    });
                  }
                  //发送数据连接指令
                }
    else{
                dialog.alert({
                title:"警告",
                msg:'确认断开设备？',
                buttons:['取消','确定']},function(ret) {
                  console.log(ret);
                });
    }
              }

  </script>
  </html>
